import * as echarts from "echarts";
import { useEffect, useRef } from "react";

const MyEcharts: React.FC<{ getOption: () => any }> = ({ getOption }) => {
  const div = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const myChar = echarts.init(div.current);

    myChar.setOption(getOption());

    function resize() {
      myChar.setOption(getOption());
      myChar.resize();
    }

    window.addEventListener("resize", resize);

    return () => {
      window.removeEventListener('resize', resize)
    };
  }, []);
  return (
    <div ref={div} style={{ height: "100%", width: "100%" }}>
      123
    </div>
  );
};

export default MyEcharts;
